<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>

    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="请输入快递单号" v-model="number">
            <button @click="sendRequest()">点击查询</button>
            <ul>
                <li v-for="(element,index) in arr" :key="index">
                    <p>{{element.time}}</p>
                    <p>{{element.context}}</p>
                </li>
            </ul>
        </div>
    </body>
</html>

<script>
    Vue.createApp({
        data: function () {
            return {
                number: '',
                arr:[]
            }
        },
        methods: {
            sendRequest: function () {
                var nu=this.number;
                var that=this;
                //?city=商洛
                axios.get('https://api.oioweb.cn/api/common/delivery', {
                    params: {
                        nu:nu,
                    }
                }).then(function (responseData) {
                    //console.log(responseData);
                    //console.log(responseData.data); //获取后台返回的JSON数据
                    that.arr =responseData.data.result.info;
                }).catch(function (err) {
                    //请求失败的处理
                    console.log(err);
                })
            }
        }
    }).mount('#app');
</script>
